<template>
	<div id="app">
		<div>
			<span>全选:</span>
			<input type="checkbox" v-model="isAllChecked"/>
			<button @click="list.forEach(item => item.checked = false)">反选</button>
			<ul>
				<li v-for="(item, index) in list">
					<!-- checked是否存在/true或false可以影响当前选框的勾选状态 -->
					<input type="checkbox" v-model="item.checked"/>
					<span>{{ item.name }}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup>
	// 计算属性
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	const list = reactive([
		{
			name: "猪八戒",
			checked: false,
		},
		{
			name: "孙悟空",
			checked: false,
		},
		{
			name: "唐僧",
			checked: false,
		},
		{
			name: "白龙马",
			checked: false,
		},
	])
	// 根据目标响应式数组动态的计算出另一个数据
	// 计算属性的结果本质也是一个响应式数据
	const isAllChecked = computed({
		get() {
			// 计算过程
			let obj = list.find(item => !item.checked)
			if(obj) {
				return false
			} else {
				return true
			}
		},
		set(value) {
			// 修改isAllChecked
			// console.log(isAllChecked.value) // 当前计算属性的值
			// console.log(value) // 可能需要改的值，根据选框的状态
			// 修改被依赖的源数据，源数据的改变会触发重新计算
			list.forEach(item => item.checked = value)
		}
	})
</script>

<style scoped>

</style>